<template>
  <transition name="fade">
    <div class="pre-loader" v-if="menuRendering">
      <div
        v-loading="menuRendering"
        element-loading-text="Loading..."
        element-loading-background="rgba(0, 0, 0, 0)"
        class="loader-gif"
      ></div>
    </div>
  </transition>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { UserModule } from '@/store/modules/user'
import { PermissionModule, findSystemId } from '@/store/modules/permission'

@Component({
  name: 'AuthRedirect'
})
export default class extends Vue {
  get menuRendering() {
    return UserModule.menuRendering
  }
  created() {}

  render() {
    // Avoid warning for missing template
  }
  mounted() {}
}
</script>
<style lang="scss">
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-image: url(./../../assets/bg.png);
  // background: rgb(48, 65, 86);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  .loader-gif {
    display: block;
    width: 100%;
    height: 100%;
    .el-loading-mask {
      .el-loading-spinner {
        top: 365px !important;
        .circular {
          width: 135px !important;
          height: 135px !important;
          margin-bottom: 65px;
          .path {
            stroke-width: 1;
          }
        }
        .el-loading-text {
          font-size: 20px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(220, 223, 230, 1);
        }
      }
    }
    // margin: -75px 0 0 -75px;
    // border-radius: 50%;
    // border: 3px solid transparent;
    // border-top-color: #e85656;
    // -webkit-transform: translate3d(0, 0, 0);
    // transform: translate3d(0, 0, 0);
    // backface-visibility: hidden;
    // -webkit-animation: spin 2s linear infinite;
    // animation: spin 2s linear infinite;
    // &::before {
    //   content: '';
    //   position: absolute;
    //   top: 5px;
    //   left: 5px;
    //   right: 5px;
    //   bottom: 5px;
    //   border-radius: 50%;
    //   border: 3px solid transparent;
    //   border-top-color: #409eff;
    //   -webkit-animation: spin 3s linear infinite;
    //   animation: spin 3s linear infinite;
    // }
    // &::after {
    //   content: '';
    //   position: absolute;
    //   top: 15px;
    //   left: 15px;
    //   right: 15px;
    //   bottom: 15px;
    //   border-radius: 50%;
    //   border: 3px solid transparent;
    //   border-top-color: #dfb81c;
    //   -webkit-animation: spin 1.5s linear infinite;
    //   animation: spin 1.5s linear infinite;
    // }
  }
}
</style>
